<template>
	<div
		ref="node"
		:style="nodeContainerStyle"
		@click="clickNode"
		@mouseup="changeNodeSite"
		:class="nodeContainerClass"
	>
		<!-- 最左侧的那条竖线 -->
		<div class="ef-node-left"></div>
		<!-- 节点类型的图标 -->
		<div class="ef-node-left-ico flow-node-drag"></div>
		<el-icon style="vertical-align: -0.15em;height: 1.1em;width: 1.1em;margin: 8px 8px 8px 12px;position: absolute;z-index: 1;">
			<component :is="`sc-icon-`+nodeIcoClass.icon" style="height: 1.1em;width: 1.1em;"/>
		</el-icon>
		<!-- 节点名称 -->
		<div class="ef-node-text" :show-overflow-tooltip="true">
			{{ node.name }}
		</div>
		<!-- 节点状态图标 -->
		<div class="ef-node-right-ico">
			<el-icon style="vertical-align: -0.15em;height: 1.1em;width: 1.1em" v-show="node.state === '1'">
				<el-icon-switch-button style="height: 1.1em;width: 1.1em"/>
			</el-icon>
			<el-icon style="vertical-align: -0.15em;height: 1.1em;width: 1.1em;color: red" v-show="node.state === '0'">
				<el-icon-circle-close style="height: 1.1em;width: 1.1em"/>
			</el-icon>
		</div>
		<div class="ef-node-remark">
			{{ node.remark }}
		</div>
	</div>
</template>

<script>
export default {
	components: {},
	props: {
		formFields:Object,
		node: Object,
		activeElement: Object
	},
	data() {
		return {}
	},
	computed: {
		nodeContainerClass() {
			return {
				'ef-node-container': true,
				'ef-node-active': this.activeElement.type == 'node' ? this.activeElement.nodeId === this.node.id : false
			}
		},
		// 节点容器样式
		nodeContainerStyle() {
			return {
				top: this.node.top,
				left: this.node.left
			}
		},
		nodeIcoClass() {
			var nodeIcoClass = {}
			nodeIcoClass[this.node.ico] = true
			// 添加该class可以推拽连线出来，viewOnly 可以控制节点是否运行编辑
			nodeIcoClass['flow-node-drag'] = this.node.viewOnly ? false : true
			nodeIcoClass.icon = this.node.ico;
			return nodeIcoClass
		}
	},
	methods: {
		// 点击节点
		clickNode() {
			this.$emit('clickNode', this.node.id,this.node.name,this.node.type,this.formFields)
		},
		// 鼠标移动后抬起
		changeNodeSite() {
			// 避免抖动
			if (this.node.left == this.$refs.node.style.left && this.node.top == this.$refs.node.style.top) {
				return;
			}
			this.$emit('changeNodeSite', {
				nodeId: this.node.id,
				left: this.$refs.node.style.left,
				top: this.$refs.node.style.top,
			})
		}
	},
}
</script>
<style scoped>
@import './index.css';
</style>
